<template>
	<div class="app-container">
		<jk-operation-card ref="box1" class="margin-bottom-10">
			<div class="flex-between-center-wrap">
				<div class="flex-start-center-wrap">
				</div>
				<div class="flex-end-center-wrap">
					<!--<jk-search-input v-model="searchParams.type" placeholder="模块" size="small" class="search-bar-item-size2 margin-5-0 item-gap" clearable @keyup.enter.native="onSearchBtn" />-->
					<jk-search-button @click="onSearchBtn"></jk-search-button>
				</div>
			</div>
		</jk-operation-card>

		<jk-card>
			<jk-table :loading="tableLoading" :data="tableData" :height="tableHeight + 20">
				<vxe-column title="模块名称" align="left" field="typeName" :min-width="160" />
				<vxe-column title="前缀" align="left" field="prefix" :min-width="100" />
				<vxe-column title="日期规则" align="left" field="date" :min-width="100" />
				<vxe-column title="流水号长度" align="right" field="numLength" :min-width="100" />
				<vxe-column title="示例" align="left" field="demo" :min-width="210">
					<template slot-scope="scope">
						<span>如：</span>
						<el-tag type="info">{{ scope.row.demo }}</el-tag>
					</template>
				</vxe-column>
				<vxe-column title="操作" align="center" fixed="right" :width="200">
					<template slot-scope="scope">
						<div class="flex-center">
							<!--<jk-delete-button :permission-prefix="prefix" @on-confirm="onDeleteBtn(scope.row)"></jk-delete-button>-->
							<jk-detail-button :permission-prefix="prefix" class="item-gap" @click="onDetailBtn(scope.row)"></jk-detail-button>
							<jk-edit-button :permission-prefix="prefix" class="item-gap" @click="onEditBtn(scope.row)"></jk-edit-button>
						</div>
					</template>
				</vxe-column>
			</jk-table>

			<!-- 分页组件 -->
			<footer ref="box2" class="flex-end-center margin-top-10">
				<jk-page
					:page-index="searchParams.pageNo"
					:page-sizes="searchParams.pageSizes"
					:page-size="searchParams.pageSize"
					:total="searchParams.count"
					@on-change="onPageChange"
				/>
			</footer>
		</jk-card>
		<detail-dialog
			:data-id="dataId"
			:dialog-state="detailDialogState"
			@on-visible-change="onVisibleChangeOfDetailDialog"
		></detail-dialog>
		<save-dialog
			:data-id="dataId"
			:dialog-state="saveDialogState"
			@on-visible-change="onVisibleChange"
			@on-finish="onFinish"
		></save-dialog>
	</div>
</template>

<script>
    import { statusList } from '@/utils/jk/status-option-list';
    import saveDialog from './save-dialog';
    import detailDialog from './detail-dialog';
    import calHeight from '/src/mixins/cal-table-height';
    import { pageConfig } from '/src/utils/jk/jk-tool';
    import { spinGenerateCodeSettingDelete, spinGenerateCodeSettingPage } from '/src/api/basicData/orderCodeSetting';

    export default {
        name: 'OrderCodeSetting',
        components: {
            saveDialog,
            detailDialog
        },
        mixins: [calHeight],
        data() {
            return {
                prefix: 'spin:generateCodeSetting',
                statusList: statusList,
                detailDialogState: false,
                dataId: null,
                saveDialogState: false,
                tableLoading: true,
                tableData: [],
                searchParams: {
                    count: 0,
                    pageNo: pageConfig.pageNo,
                    pageSize: pageConfig.pageSize,
                    type: null
                }
            };
        },
        mounted() {
            this.getListRequest();
        },
        methods: {
            onPageChange(pageIndex, pageSize) {
                this.searchParams.pageNo = pageIndex;
                this.searchParams.pageSize = pageSize;
                this.getListRequest();
            },
            onDetailBtn(e) {
                this.dataId = e.id;
                this.detailDialogState = true;
            },
            onVisibleChangeOfDetailDialog(e) {
                if (!e) {
                    this.dataId = null;
                }
                this.detailDialogState = e;
            },
            onFinish() {
                this.saveDialogState = false;
                this.getListRequest();
            },
            onVisibleChange(e) {
                if (!e) {
                    this.dataId = null;
                }
                this.saveDialogState = e;
            },
            /** 查询列表 */
            getListRequest() {
                this.tableLoading = true;
                spinGenerateCodeSettingPage(this.searchParams).then(res => {
                    this.tableLoading = false;
                    if (res.data.status === 200) {
                        this.tableData = res.data.res.map(x => {
                            let num = '';
                            for (let i = 0; i < x.numLength - 1; i++) {
                                num += '0';
                            }
                            num += '1';
                            let dStr = '';
                            if (x.date === 'yyyy') {
                                dStr = '2022';
                            } else if (x.date === 'yyyyMM') {
                                dStr = '202212';
                            } else if (x.date === 'yyyyMMdd') {
                                dStr = '20221201';
                            } else if (x.date === 'yyyyMMddHHmmss') {
                                dStr = '20221201123001';
                            } else {
                                dStr = '';
                            }
                            x.demo = `${x.prefix}${dStr}${num}`;
                            return x;
                        });
                        this.searchParams.count = res.data.count;
                    }
                });
            },
            /** 搜索按钮操作 */
            onSearchBtn() {
                this.searchParams.pageNo = 1;
                this.searchParams.count = 1;
                this.getListRequest();
            },
            /** 修改按钮操作 */
            onEditBtn(row) {
                this.dataId = row.id;
                this.saveDialogState = true;
            },

            /** 删除按钮操作 */
            onDeleteBtn(row) {
                spinGenerateCodeSettingDelete({ id: row.id }).then((res) => {
                    if (res.data.status === 200) {
                        this.getListRequest();
                        this.$tipsBar(this, 'delete');
                    }
                }).catch(() => {});
            }
        }
    };
</script>
